<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="周期类" name="first">
		
		 <el-card class="shujucard" v-for="index in 4" :key="index">
			 <div class="biaoqian">房屋</div>
			 <div class="shujutop"></div>
			 <div class="shujubtm"></div>
		  </el-card>
		
	</el-tab-pane>
    <el-tab-pane label="仪表类" name="second">Config</el-tab-pane>
    <el-tab-pane label="单次计费类" name="third">Role</el-tab-pane>
    <el-tab-pane label="租金类" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  padding-top: 10px;
}
.shujucard{
	width: 420px;
	height: 180px;
	margin-left: 20px;
	margin-top: 26px;
	float: left;
	border-radius: 10px;
	
}
.biaoqian{
	    padding: 4px 13px 2px 13px;
	    background: radial-gradient(circle, #00c36d 0, #64dc6d 100%);
	    -webkit-box-shadow: 0 4px 10px rgba(0,195,109,.3);
	    box-shadow: 0 4px 10px rgba(0,195,109,.3);
	    border-radius: 10px 0 10px 0;
	    color: #fff;
	    font-weight: 700;
		width: 50px;
		height: 30px;
		position: relative;
		top: -20px;
		left: -20px;
		font-size: 16px;
}
.shujutop{
	border: 1px solid gainsboro;
	height: 32px;
	border-radius: 10px;
}
.shujubtm{
	border: 1px solid gainsboro;
	height: 62px;
	margin-top: 10px;
	border-radius: 10px;
}
</style>